<template>
  <div class="product-item">
    <!--<div class="product-left-img" >
      &lt;!&ndash;:style="{backgroundImage: 'url('+img+')' }"&ndash;&gt;
      &lt;!&ndash;<img class="img-entity"  src="../../assets/logo.png"  />&ndash;&gt;
    </div>
    <div class="right-information">
      <span class="product-title">眉山市的又好吃有巴适的东坡肉</span>
      <div class="price-line">
        <span class="promotion-price">￥20</span>
        <s class="origin-price">￥25</s>
      </div>
      <div class="msg-line">
        <span class="post-fee">免邮费</span>
        <span class="purchase-count">1人付款</span>
        <span class="location">成都</span>
      </div>
    </div>-->
    <div class="product-img-container">
      <img class="product-show-img" @click="navigation" :src="product.displayImage" :alt="product.name"/>
    </div>
    <div class="product-text-desc">
      <a class="text-fix" :href="linkUrl">{{product.name}}</a>
    </div>
    <div class="product-purchase">
      <span class="product-current-price">￥{{product.price}}元/500g</span>
      <a :href="linkUrl" class="btn-purchase">立即购买</a>
    </div>
  </div>
</template>

<script>
  export default {
    name: 'Product',
    props: {
      product: {
        type: Object
      },
      linkUrl: {
        type: String
      }
    },
    methods: {
      navigation () {
        window.location.href = 'product_detail.html'
      }
    }
  }
</script>

<style lang="scss">
  @import "../../assets/css/variable";
  @import "../../assets/css/px2rem";
  .product-item{
    width: 49%;
    margin-right: 1%;
    float: left;
    height: px2rem(680px);
    background: white;
    border-radius: 5px;
    margin-top: px2rem(20px);
    &:nth-child(2n) {
      margin-left: 1%;
      margin-right: 0%;
    }


    .product-show-img{
      width:100%;
      height: 100%;
    }

    .product-img-container{
      float: left;
      height: px2rem(440px);
      width: 100%;
      display: block;
    }

    .product-text-desc{
      float: left;
      width: 100%;
      box-sizing: border-box;
      margin: px2rem(20px) px2rem(10px);
      height: px2rem(120px);
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
      font-size: 0.55rem;
      overflow: hidden;
    }

    .product-purchase{
      line-height: px2rem(80px);
      height: px2rem(80px);
      width: 100%;
      float: left;
      display: block;
      .product-current-price{
        float: left;
        font-size: 0.6rem;
        color: $theme-color;
        margin-left: px2rem(10px);
      }

      .btn-purchase{
        float: right;
        color: #c4c4c4;
        font-size: 0.5rem;
        text-decoration: none;
        padding-right: px2rem(10px);
      }
    }

    /*height: px2rem(440px);
    padding: px2rem(20px);
    position: relative;
    border-bottom: 1px solid #ccc;
    .product-left-img{
      position: absolute;
      left:px2rem(50px);
      top:px2rem(50px);
      width:px2rem(380px);
      height: px2rem(380px);
      background-size: cover;
      background-image: url("../../assets/images/timg.jpeg");
    }

    .right-information{
      box-sizing: border-box;
      padding-left:px2rem(430px);
      width:100%;
      height: 100%;
      display: block;
    }

    .product-title{
      color: #5b5b5b;
      font-size: 0.7rem;
      display: block;
      float: left;
      line-height: 1rem;
      margin-top: px2rem(20px);
    }

    .price-line,
    .msg-line{
       margin-top: px2rem(30px);
       height: px2rem(100px);
       width: 100%;
       clear: both;
    }

    .promotion-price{
      color: $theme-color;
      font-size: 0.7rem;
      margin-right: px2rem(10px);
    }

    .origin-price{
      color: #ccc;
      font-size: 0.65rem;
    }

    .post-fee,
    .purchase-count,
    .location{
      width:33.333%;
      float: left;
      text-align: left;
      color: #ccc;
      font-size: 0.6rem;
      line-height:  px2rem(100px);
      text-indent: px2rem(10px);
    }

    .location{
      text-align: center;
    }*/

    .text-fix{
      text-decoration: none;
      color: $fontColor;
    }
  }
</style>
